<template>
  <div style="background: #f8f8f8; min-height: calc(100vh - 200px)">
    <!-- 导航条以及外壳 -->
    <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
      <a-breadcrumb separator=">">
        <a-breadcrumb-item href="">首页</a-breadcrumb-item>
        <a-breadcrumb-item
          href=""
          @click.native="$router.push('/education/educationHome')"
        >
          教育培训
        </a-breadcrumb-item>
        <a-breadcrumb-item style="color: #ffbe37">在线课程</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="top">
      <a-input
        v-model="msgons"
        placeholder="请输入关键字"
        class="searchInput"
      />
      <div class="searchIcon" @click="searchSel()">
        <img src="@/assets/image/icon1.png" alt="" />
        <span>搜索</span>
      </div>
    </div>
    <div class="conder">
      <div class="cOsingleCF">
        <div>
          <span class="x5TXt">类型：</span>
        </div>
        <div>
          <ul>
            <li
              @click="selColor(null)"
              :class="{ sconColor: selnumber == null }"
            >
              全部
            </li>
            <li
              :class="{ sconColor: selnumber == index }"
              @click="selColor(index)"
              v-for="(item, index) in titleList"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="cOsingleCF">
        <div>
          <span class="x5TXt">职场技能：</span>
        </div>
        <div>
          <ul>
            <li
              @click="selSkill(null)"
              :class="{ sconColor: selnumber2 == null }"
            >
              全部
            </li>
            <li
              :class="{ sconColor: selnumber2 == index }"
              @click="selSkill(index)"
              v-for="(item, index) in skillList"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 职位展示区域 -->
      <div class="coRsingleCF" style="margin-top: 20px">
        <div
          class="listDiv wrapper"
          @click="getJumpVideo(item)"
          v-for="(item, list) in jykcList"
          :key="list + 'sas'"
        >
          <div class="image1">
            <img
              class="imgborder"
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </div>
          <div>
            <span class="titleTxt1 lineSingle">
              {{ item.name }}
            </span>

            <p class="titleTxt5 multiline">
              {{ item.briefDesc }}
            </p>
            <!-- <span style="margin-top: 16px" class="greyBlue" v-if="item.webName"
              >相关政策：<a
                class="ams"
                v-if="item.webUrl"
                :href="item.webUrl"
                 target="_blank"
                >{{ item.webName }}</a
              >
              <a v-else>{{ item.webName }}</a></span
            >
            <span style="margin-top: 8px" class="greyBlue" v-if="item.jobLis"
              >相关职位：
              <a v-for="(item, i) in item.jobLis" :key="i"> {{ item }}</a></span
            > -->

            <div style="margin-top: 8px" class="dlex2-div">
              <span class="smallPrint">{{ item.learnNumber }}人已学习</span>
            </div>

            <div style="margin-top: 8px" class="dlex2-div">
              <span class="redTxt" v-if="item.freeFlag == 'N'">
                <p class="redTxt" style="font-size: 12px">￥</p>
                {{ item.cost }}
              </span>

              <span class="redTxt" v-else>{{
                item.freeFlag == "Y" ? "免费" : "限时免费"
              }}</span>
              <!-- <span class="smallPrint" style="margin-left: 32px"
                >{{ item.learnNumber }}人已学习</span
              > -->
            </div>
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin: 68px"
        v-if="jykcList.length < 1 && flag"
      />
    </div>
    <div class="cnBottom" v-if="jykcList.length > 9">
      <div style="margin: 0 auto; width: 230px">
        <a-button v-if="btnState == 1" @click="more()" class="sobtn"
          >点击加载更多</a-button
        >
        <span class="timeTxt1" v-if="btnState == 3" style="text-align: center"
          >没有更多了~</span
        >
        <a-button v-if="btnState == 2" :loading="true" class="sobtn"
          >加载中</a-button
        >
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      // 搜索内容关键字
      msgons: "",
      // 类别码
      classNbr: "",
      // 当前页码
      pageIndex: 1,
      selnumber: null,
      selnumber2: null,
      btnState: 1,
      jykcList: [],
      // 标签列表
      titleList: [],
      // 技能列表
      skillList: [],
      flag: false,
      onLoading: false,
    };
  },
  methods: {
    onSearch(value) {
      return value;
      console.log(value);
    },
    // 输入框的回调
    inputsel(e) {
      if (e.data == null) {
        this.pageIndex = 1;
        this.jykcList = [];
        this.listCurriculum();
      }
    },
    // 搜索
    searchSel() {
      this.pageIndex = 1;
      this.jykcList = [];
      this.listCurriculum();
    },
    // 查询课程分类接口
    selEducation() {
      this.$ajax({
        url: "/news/code/list/tree",
        method: "post",
        params: {
          codeType: 13,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.titleList = res.data;
          // 查询课程
          // console.log(this.titleList);
        }
      });
    },
    // 选中样式函数
    selColor(e) {
      this.msgons = "";
      this.jykcList = [];
      this.pageIndex = 1;
      this.selnumber = e;
      if (e != null) {
        this.classNbr = this.titleList[e].code;
        this.skillList = this.titleList[e].children;
        this.listCurriculum(this.classNbr);
      } else {
        // 技能数组置空
        this.skillList = [];
        // 技能选中置null
        this.selnumber2 = null;
        // 类选中置null
        this.classNbr = null;
        // 查询接口
        this.listCurriculum(this.classNbr);
      }
    },
    // 选中技能
    selSkill(e) {
      this.msgons = "";
      this.jykcList = [];
      this.pageIndex = 1;
      this.selnumber2 = e;
      if (e != null) {
        this.listCurriculum(this.skillList[e].code);
        this.classNbr=this.skillList[e].code;
      } else {
        // 技能选中置null
        this.selnumber2= this.classNbr = null;
        // 查询接口
        this.listCurriculum(this.classNbr);
      }
    },
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push("/video/detailsVideo?courseNo=" + e.courseNo);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.listCurriculum(this.classNbr);
    },
    // 课程推荐
    listCurriculum(e) {
      this.onLoading = true;
      this.flag = false;
      let ber = [];
      this.$ajax({
        url: "/educational/courseinfo/list?",
        method: "post",
        params: {
          name: this.msgons, //字段名：课程名称 描述：课程名称
          sortNo: e, //字段名：分类编码 描述：分类编码
          pageSize: 10, //分页闭区间
          pageIndex: this.pageIndex, //分页开区间
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          ber = res.data.list;
          for (var i in ber) {
            this.jykcList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false;
          this.jykcList = [];
          return false;
        }
      });
    },
  },
  created() {
    this.listCurriculum();
    this.selEducation();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//  自己写
//input框内文字修改
::-webkit-input-placeholder {
  font-size: 15px;
  font-family: PingFangSC-Regular;
  color: #999999 !important;
}
.top {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
// 中间部分样式
.conder {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  .listDiv {
    width: 590px;
    height: 190px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 12px;
    float: left;
    margin-left: 20px;
    margin-bottom: 24px;
    align-items: flex-end;
    display: flex;
    cursor: pointer;
    .image1 {
      margin-right: 20px;
      img {
        width: 217px;
        height: 150px;
      }
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.cnBottom {
  width: 100%;
  margin-top: 60px;
  padding-bottom: 70px;
}

.redTxt {
  display: flex;
  align-items: baseline;
}
.dlex2-div {
  max-width: 250px;
  overflow: hidden;
  padding-left: 5px;
  margin: 8px 0;
  .titlenav {
    flex-shrink: 0;
  }
}

.multiline {
  margin-top: 8px;
  -webkit-line-clamp: 2;
}
.lineSingle {
  font-weight: 600;
  margin-top: 6px;
  width: 300px;
  text-align: left;
}
.x5TXt {
  width: 80px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
</style>
